<template>
  <div id="addQuestion">
    <popup v-model="showAdd" @click = "hideMask">
        <div class="add-container">
          <div class="add-header">
            <p>追问</p>
            <img src="static/image/public/closeIcon.png" alt="closeIcon" class="add-close" @click="hideMask" >
          </div>
          <div class="question-content">
            <p class="add-subtitle">如对以上解答有疑问，您还有<span class="add-warn">{{askNum}}</span>次免费追问的机会</p>
            <textarea class="add-text" placeholder="请填写您想追问的问题" v-model="addText"></textarea>
            <div class="question-submit" @click="submitQuestion">提交</div>
          </div>
        </div>
      </popup>
  </div>
</template>
<script>
import { Popup } from 'vux'
export default {
  props: {
    showStatus:{
      type: Boolean,
      default: false
    },
    value: {
      type: Number,
    },
    orderCode:{
      type: String,
      default: ''
    },
    mid: {
      type: Number,
      default: undefined
    }
  },
  components: {
    Popup
  },
  data() {
    return {
      showAdd: this.showStatus,
      addText: '',// 追问内容
      askNum: this.value,// 追问次数
      ordercode: this.orderCode,
      masterId: this.mid
    }
  },
  created(){
    console.log('追问组件初始化的订单号',this.ordercode,'初始化的大师id',this.masterId)
  },
  watch:{
    showStatus:function(val){
      this.showAdd = val;
    },
    showAdd:function(val){
      this.$emit('changeStatus',val)
    },
    orderCode(val) {
      if(val){
        this.ordercode = val
      }
    },
    mid(val){
      this.masterId = val
    },
    value(val) {
      this.askNum = val
    }
  },
  methods:{
    hideMask() {
      this.showAdd = false
    },
    submitQuestion() {
      var totalConfig = {
          type:'text',
          text:'',
          position:'top'
        }
      if(this.addText == ''){
        totalConfig.text = '您还未提出追问问题'
        this.$vux.toast.show(totalConfig);
      }else{
        this.axiosSubmit()
        this.addText = ''
        this.hideMask()
      }     
    },
    // 提交追问
    axiosSubmit(){
      let uid = this.$store.state.userID
      console.log('追问参数',this.ordercode,this.masterId,this.addText)
      // let uid = 40
      this.$fetch.post('/app/Jmyc/add_ask',{
        uid: uid,
        question: this.addText,
        ordercode: this.ordercode,
        mid: this.masterId
      }).then(res=>{
        console.log(res)
        //toast公共配置
        var totalConfig = {
          type:'text',
          text:'',
          position:'top',
          time:1000
        }
        if(res.code == 200){
          this.$emit('input',--this.askNum)
          totalConfig.text = '提交成功'
        }else{
          totalConfig.text = '提交失败，请稍后重试'
        }
        this.$vux.toast.show(totalConfig);
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .add-container{
     background: white;
    overflow: hidden;
    .add-header{
      height: 90px;
      line-height: 90px;
      text-align: center;
      position: relative;
      color: #333;
      font-size: 36px;
      border-bottom: 1px solid #E6E6E6;/*no*/
      .add-close{
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        right: 30px;
        margin-top: -15px;
      }
    }
    .question-content{
      padding: 0 50px;
      .add-subtitle{
        text-align: center;
        height: 100px;
        line-height: 100px;
        color: #333;
        font-size: 26px;
        .add-warn{
          color:#FDC470;
          font-weight: bold;
          padding: 0 5px;
          }
        }
        .add-text{
          width: 100%;
          height: 336px;
          resize: none;
          padding: 20px;
          color: #333;
          border: 1px solid #E6E6E6;/*no*/
          box-sizing: border-box;
          font-size: 28px;
          word-break: break-all;
          border-radius: 10px;
        }
      .question-submit{
          margin: 30px 0 40px;
          font-size: 36px;
          color: white;
          height:84px;
          line-height: 84px;
          text-align: center;
          background:linear-gradient(90deg,rgba(253,196,111,1),rgba(254,172,50,1));
          border-radius:10px;
        }
    }
    
      
  }
</style>